<template>
  <div class="password-card">
    <h3>修改密码</h3>
    <div class="form-group">
      <label>旧密码</label>
      <input type="password" v-model="oldPassword" />
    </div>
    <div class="form-group">
      <label>新密码</label>
      <input type="password" v-model="newPassword" />
    </div>
    <div class="form-group">
      <label>确认新密码</label>
      <input type="password" v-model="confirmPassword" />
    </div>
    <button @click="submitPasswordChange">提交修改</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const oldPassword = ref('')
const newPassword = ref('')
const confirmPassword = ref('')

const submitPasswordChange = async () => {
  if (newPassword.value !== confirmPassword.value) {
    alert('两次输入的新密码不一致')
    return
  }
  try {
    const response = await axios.post('/api/changePassword', {
      userId: userStore.currentUser.userId,
      oldPassword: oldPassword.value,
      newPassword: newPassword.value
    })
    alert('密码修改成功')
    oldPassword.value = ''
    newPassword.value = ''
    confirmPassword.value = ''
  } catch (err) {
    alert(err.response?.data || '密码修改失败')
  }
}
</script>

<style scoped>
.password-card {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fafafa;
}
.form-group {
  margin-bottom: 15px;
}
.form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}
.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  padding: 8px 16px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #40a9ff;
}
</style>
